<template>
  <div>
    <section>
      <div class="topDiv">
        <div class="topLeft" ref="topLeft" :style="{height: topLeftHeight}">
          <div class="div1" ref="div1" :style="{height: div1Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/hbl.png" alt="">
            </div>
            <div class="lofo-title">红包乐</div>
          </div>
          <div class="div2" ref="div2" :style="{height: div2Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/bbl.png" alt="">
            </div>
            <div class="lofo-title">帮帮乐</div>
          </div>
          <div class="div3" ref="div3" :style="{height: div3Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/wbl.png" alt="">
            </div>
            <div class="lofo-title">挖宝乐</div>
          </div>
        </div>
        <div class="topRight" :style="{height: topLeftHeight}">
          <div class="div4" ref="div4" :style="{height: div4Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/jjl.png" alt="">
            </div>
            <div class="lofo-title">集集乐</div>
          </div>
          <div class="div5" ref="div5" :style="{height: div5Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/byl.png" alt="">
            </div>
            <div class="lofo-title">博弈乐</div>
          </div>
        </div>
      </div>
      <div class="bottomDiv">
        <div class="bottomLeft" ref="bottomLeft" :style="{height: bottomLeftHeight}">
          <div class="div6" ref="div6" :style="{height: div6Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/ppl.png" alt="">
            </div>
            <div class="lofo-title">碰碰乐</div>
          </div>
          <div class="div7" ref="div7" :style="{height: div7Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/zcl.png" alt="">
            </div>
            <div class="lofo-title">众筹乐</div>
          </div>
        </div>
        <div class="bottomRight" :style="{height: bottomLeftHeight}">
          <div class="div8" ref="div8" :style="{height: div8Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/ptl.png" alt="">
            </div>
            <div class="lofo-title">拼拼乐</div>
          </div>
          <div class="div9" ref="div9" :style="{height: div9Height}" @click="test">
            <div class="logo-container">
              <img src="../assets/gamePark/ftl.png" alt="">
            </div>
            <div class="lofo-title">翻天乐</div>
          </div>
        </div>
      </div>
    </section>
    <!-- tab菜单栏 -->
    <tabbar :selected='selected' :tabs='tabs'></tabbar>
  </div>
</template>
<script>
  import tabbar from '../components/tabbar'
  import { WXShare } from '../libs/publicMethod'
  export default {
    components: { tabbar, WXShare },
    data () {
      return {
        selected: 'tab4',
        topLeftHeight: '',
        bottomLeftHeight: '',
        div1Height: '',
        div2Height: '',
        div3Height: '',
        div4Height: '',
        div5Height: '',
        div6Height: '',
        div7Height: '',
        div8Height: '',
        div9Height: '',
        tabs: [
          require('../assets/tabs/sc.png'),
          require('../assets/tabs/zq.png'),
          require('../assets/tabs/fx.png'),
          require('../assets/tabs/ylc2.png'),
          require('../assets/tabs/user.png')
        ],
      }
    },
    methods: {
      test () {
        this.$toast('暂未开放')
      }
    },
    mounted(){
      document.body.style.paddingBottom = '57px'
      WXShare.hideOptionMenu();
      let vm = this
      vm.topLeftHeight = vm.$refs.topLeft.offsetWidth * 2.35 + 'px'
      vm.bottomLeftHeight = vm.$refs.bottomLeft.offsetWidth * 2.58 + 'px'
      vm.div1Height = vm.$refs.div1.offsetWidth * 0.66 + 'px'
      vm.div2Height = vm.$refs.div2.offsetWidth + 'px'
      vm.div3Height = vm.$refs.div3.offsetWidth * 0.6 + 'px'
      vm.div4Height = vm.$refs.div4.offsetWidth * 1.66 + 'px'
      vm.div5Height = vm.$refs.div5.offsetWidth * 1.96 + 'px'
      vm.div6Height = vm.$refs.div6.offsetWidth + 'px'
      vm.div7Height = vm.$refs.div7.offsetWidth * 1.51 + 'px'
      vm.div8Height = vm.$refs.div8.offsetWidth + 'px'
      vm.div9Height = vm.$refs.div9.offsetWidth * 0.6 + 'px'
    },
  }
</script>
<style scoped>
section{
  width: 100%;
}
.topDiv, .bottomDiv{
  width: 94%;
  margin: 2.5% auto;
  display: flex;
  justify-content: space-between;
}
.topLeft, .bottomRight{
  width: 59.5%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.topRight, .bottomLeft{
  width: 38%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.topLeft>div,.topRight>div,.bottomLeft>div,.bottomRight>div{
  width: 100%;
  border-radius: .5rem;
  -moz-box-shadow: 0rem .5rem 1rem .1rem rgba(200,200,200,.5);
  -webkit-box-shadow: 0rem 3px 3px 0rem rgba(200,200,200,.5);
  box-shadow: 0rem .5rem 1rem .1rem rgba(200,200,200,.5);
  position: relative;
}
.div1{
  background: linear-gradient(to left, #FF482B , #F9105A);
}
.div2{
  background: linear-gradient(to bottom, #9D09FF , #5020D7);
}
.div3{
  background: linear-gradient(to bottom, #58E355 , #099D5B);
}
.div4{
  background: linear-gradient(to bottom, #2C82F9 , #710CFF);
}
.div5{
  background: linear-gradient(to bottom, #F0BC1C , #F78F33);
}
.div6{
  background: linear-gradient(to bottom, #F14CF7 , #8B2ECC);
}
.div7{
  background: linear-gradient(to bottom, #FE5230 , #F31E5D);
}
.div8{
  background: linear-gradient(to bottom, #16A9F5 , #0E55FC);
}
.div9{
  background: linear-gradient(to bottom, #FF8888 , #FF7550);
}
.logo-container{
  position: absolute;
  top: 23%;
  left: 0;
  right: 0;
  margin: auto;
}
.div1 .logo-container{
  width: 38%;
}
.div2 .logo-container{
  width: 31%;
}
.div3 .logo-container{
  width: 31%;
}
.div4 .logo-container{
  width: 57%;
}
.div5 .logo-container{
  width: 47%;
}
.div6 .logo-container{
  width: 58%;
}
.div7 .logo-container{
  width: 40%;
}
.div8 .logo-container{
  width: 27%;
}
.div9 .logo-container{
  width: 34%;
}
.logo-container img{
  width: 100%;
  height: 100%;
}
.lofo-title{
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  font-size: .95rem;
}
.div2 .logo-container, .div4 .logo-container, .div7 .logo-container, .div8 .logo-container{
  top: 33%;
}
.div3 .logo-container{
  top: 18%;
}
.div5 .logo-container{
  top: 37%;
}
.div9 .logo-container{
  top: 18%;
}
</style>
